<template>
<div>
    <city-header></city-header>  
    <city-search :cities="cities"></city-search>  
    <city-list :cities="cities" :hot="hotCities" :letter="letter"></city-list>  
    <alphabet :cities="cities" @change="handleLetterChange"></alphabet>  
</div>
    
</template>

<script>
import axios from 'axios'
import cityHeader from './components/cityHeader.vue'
import citySearch from './components/citySearch.vue'
import cityList from './components/cityList.vue'
import alphabet from './components/Alphabet.vue'
export default {
    components : {
        cityHeader,
        citySearch,
        cityList,
        alphabet
    },
    data() {
        return {
            cities:{},
            hotCities:[],
            letter: ''
        }
    },
    mounted() {
        this.getCityInfo()
    },
    methods: {
        getCityInfo() {
            axios.get('/api/city.json')
                .then(this.handleGetCityInfo)
        },
        handleGetCityInfo(res) {
            console.log(res)
            const data = res.data
            if(data.ret && data.data) {
                const info = data.data
                this.cities = info.cities
                this.hotCities = info.hotCities
            }
        },
        handleLetterChange(letter) {
            this.letter = letter
        }
    }
}
</script>

<style>

</style>
